<template>
  <el-container>
    <el-main>
      <div class="sa-m-b-10" style="color: #FA5151" v-if="form.status === '2'">驳回原因：{{ form.remarks }}</div>
      <div class="tips">
        <div class="tips-box">
          <span>商户名称   <span class="sa-m-l-20">{{ form.name }}</span></span>
          <span>商户类型   <span class="sa-m-l-20">{{ form.type_text }}</span></span>
        </div>
      </div>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="品牌logo">
          <sa-preview :url="form.logo" size="80"></sa-preview>
        </el-form-item>
        <el-form-item label="商标注册号">
          <el-input v-model="form.trademark_registration_number" disabled />
        </el-form-item>
        <el-form-item label="商品类目">
          <el-cascader disabled v-model="form.category_ids" :props="{value:'id',label:'name',multiple: true}"
                       :options="state.data" />
        </el-form-item>
        <el-form-item label="资质证明">
          <div style="display: flex;justify-content: center;">
            <div v-for="(item,index) in form.qualification_certificate" :key="index">
              <sa-preview :url="item" size="80"></sa-preview>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="时间范围" prop="resource">
          <el-radio-group v-model="form.auth_type" disabled>
            <el-radio value="permanent">长期有效</el-radio>
            <el-radio value="fixed">授权期限</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="时间范围" v-if="form.auth_type === 'fixed'">
          <el-col :span="11">
            <el-form-item prop="begin_time">
              <el-date-picker
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                v-model="form.begin_time"
                type="datetime"
                placeholder="开始日期"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col class="line" style="text-align: center" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="end_time">
              <el-date-picker
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                v-model="form.end_time"
                type="datetime"
                placeholder="结束日期"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
    </el-main>
    <!--    <el-footer class="sa-footer&#45;&#45;submit">-->
    <!--      <el-button type="primary" @click="apply">-->
    <!--        添加-->
    <!--      </el-button>-->
    <!--    </el-footer>-->
  </el-container>
</template>
<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { api } from './brand.service';
  import { cloneDeep } from 'lodash';
  import { ElMessage } from 'element-plus';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });


  const form = reactive({
    logo: '',
    trademark_registration_number: '',
    category_ids: [],
    qualification_certificate: '',
    begin_time: '',
    end_time: '',
    auth_type: 'permanent',
    name: '',
    type_text: '',
    remarks: '',
    status: '',
  });

  const state = reactive({
    data: [],
  });


  onMounted(() => {
    if (props.modal.params.type) {
      getData();
      getTypeData();
    }
  });


  const getTypeData = async () => {
    const { error, data } = await api.goods_type({
      type: props.modal.params.type,
    });
    if (error === 0) {
      state.data = data[0].children;
    }
  };
  const getData = async () => {
    const { error, data } = await api.details(props.modal.params.id);
    if (error === 0) {
      form.logo = data.logo;
      form.name = data.store.name;
      form.type_text = data.store.type_text;
      form.remarks = data.remarks;
      form.status = data.audit_status;
      form.trademark_registration_number = data.trademark_registration_number;
      form.category_ids = data.category_ids.split(',').map(item => {
        return Number(item);
      });
      form.qualification_certificate = JSON.parse(data.qualification_certificate);
      form.auth_type = data.auth_type;
      if (data.auth_type === 'fixed' && data.expiration_date) {
        form.begin_time = JSON.parse(data.expiration_date)[0];
        form.end_time = JSON.parse(data.expiration_date)[1];
      }
    }
  };
</script>
<style lang="scss" scoped>

  .tips {
    background: #F5F5F5;
    margin-bottom: 20px;
    padding: 20px 0;
  }

  .tips-box {
    width: 733px;
    border-radius: 5px;
    background: #FDFDFD;
    margin: auto;
    font-size: 12px;
    font-weight: normal;
    line-height: 22px;
    color: #3D3D3D;
    word-break: break-all;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
</style>
